<template>
    <div id="app">
      <el-form label-width="130px">
        <el-form-item label="选择版权">
          <el-select  v-model="kehu.copyrightName" placeholder="请选择">
            <el-option
              v-for="item in banquanList"
              :key="item.id"
              :label="item.title"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-col :span="5">
            <el-input v-model="kehu.name"/>
          </el-col>
        </el-form-item>
        <el-form-item label="职务">
          <el-col :span="5">
            <el-input v-model="kehu.post"/>
          </el-col>
        </el-form-item>
        <el-form-item label="性别">
          <template>
            <el-radio v-model="kehu.isSex" :label="0">男</el-radio>
            <el-radio v-model="kehu.isSex" :label="1">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="kehu.birthday"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-col :span="5">
            <el-input v-model="kehu.tel"/>
          </el-col>
        </el-form-item>
        <el-form-item label="座机号">
          <el-col :span="5">
            <el-input v-model="kehu.landline"/>
          </el-col>
        </el-form-item>
        <el-form-item label="QQ">
          <el-col :span="5">
            <el-input v-model="kehu.qq"/>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-col :span="5">
            <el-input v-model="kehu.email"/>
          </el-col>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-col :span="5">
            <el-input v-model="kehu.address"/>
          </el-col>
        </el-form-item>
        <el-form-item label="备注">
          <el-col :span="5">
            <el-input v-model="kehu.remarks"/>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="createKehu()">提交</el-button>
          <router-link :to="'/copyrightin/cmi/kehu'">
            <el-button type="primary">返回</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
  import kehu from "@/api/copyrightin/kehu";
    export default {
      data() {
        return {
          kehu: {
            copyrightName:'',
            name:'',
            post:'',
            isSex:'',
            birthday:'',
            tel:'',
            landline:'',
            qq:'',
            email:'',
            address:'',
            remarks:''
          }, // ## 添加的客户的对象
          BASE_API: process.env.VUE_APP_BASE_API,
          banquanList:{}, // ## 选择的版权方
          saveBtnDisabled:false,
          banquanList:{} // ## 选择的版权方
        }
      },
      created() {
        this.init()
        this.banquan()
      },
      methods:{
        init() {
          if (this.$route.params && this.$route.params.id){
            const id = this.$route.params.id
            this.view(id)
          }
        },
        view(kehuId) {
          kehu.view(kehuId)
              .then(response => {
                this.kehu = response.data.kehu
              })
        },
      banquan() {
        kehu.banquan()
          .then(response => {
            this.banquanList = response.data.items
          })
      },
        createKehu() { // ## 保存数据
          this.saveBtnDisabled = true
          kehu.update(this.kehu)
               .then(response => {
                 // 成功后做消息提示
                 this.$message({
                   type:'success',
                   message:'保存成功！'
                 })
                 // ## 返回客户管理页面
                 this.$router.push("/copyrightin/cmi/kehu")
               })
        }
      }
    }
</script>

<style scoped>

</style>
